<template>
  <ul class="list">
    <li
      class="item"
      v-for="(item, key) of cities"
      :key="key"
      @click="handleLetterClick"
      @touchstart='handleTouchStart'
      @touchmove='handleTouchMove'
      @touchend='handleTouchEnd'
      :ref="item.name"
    >
      {{item.name}}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  computed: {
    // letters () {
    //   const letters = []
    //   for (let i in this.cities) {
    //     letters.push(i)
    //   }
    //   return letters
    // }
  },
  data () {
    return {
      cities: [
        {
          id: '001',
          name: 'A'
        }, {
          id: '002',
          name: 'B'
        }, {
          id: '003',
          name: 'C'
        }, {
          id: '004',
          name: 'D'
        }, {
          id: '005',
          name: 'E'
        }
      ],
      touchStatus: false,
      myTimer: null,
      stratY: 0
    }
  },
  mounted () {
    this.stratY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      this.myTimer && clearTimeout(this.myTimer)
      this.myTimer = setTimeout(() => {
        if (this.touchStatus) {
          const touchY = e.touches[0].clientY - 89
          const index = Math.floor((touchY - this.stratY) / 20)
          if (index >= 0 && index < this.cities.length) {
            this.$emit('change', this.cities[index].name)
          }
        }
      }, 16)
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style lang='stylus' scoped>
  @import '~styles/varibles.styl'
  .list
    position absolute
    display flex
    flex-direction column
    justify-content center
    align-items center
    top 1.58rem
    right 0
    bottom 0
    width .4rem
    .item
      color $bgColor
      height .4rem
</style>
